<?php echo $this->doctype('XHTML1_STRICT'); ?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<?php 
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8')
                 ->appendHttpEquiv('Content-Language', 'en-US');             
                 
echo $this->headMeta() . "\n";
$this->headTitle('Flickr Slide');

echo "\n";
     
echo $this->headTitle() . "\n\n";
?>

<style>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
}

div#slide {
    width: <?php echo $this->screenWidth; ?>px;
    height: <?php echo $this->screenHeight; ?>px;
    background-color: <?php echo ($this->bgColor == '') ? '#FFFFFF' : '#' . $this->bgColor; ?>;
}

#photoStack .animate {
    -webkit-animation-name : shuffle;
    -webkit-animation-duration : 1s;
    -webkit-animation-iteration-count : 1;
}

@-webkit-keyframes shuffle {
    0% {
        margin-left: 0px;
    }
    
    50% {
        margin-left: 750px;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        transform: scale(0.9);
    }
    
    100% {
        margin-left: 0px;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/public/scripts/jquery.slideshow.js?v=<?php echo time(); ?>"></script>

<script type="text/javascript">

function init() {

	$('#slide').slideshow({
        feed:            '<?php echo $this->feed; ?>',
        display:         '<?php echo $this->display; ?>',
        embiggen:        <?php echo $this->embiggen; ?>,
        random:          <?php echo $this->random; ?>,
        title:           <?php echo $this->titleShow; ?>,
        hold:            <?php echo $this->hold * 1000; ?>,
        wait:            1000,
        transitionSpeed: 500
    });

    // refresh the feed after x minutes
    setInterval("$('#slide').slideshow('refresh')", <?php echo $this->refreshTime * 60 * 1000; ?>);
}

function onShow(msg) {
    // do nothing
}

function onHide(msg) {
	// do nothing
	
}    
</script>


</head>

<body>
    <div id="slide"></div>
</body>
</html>